<template>
	<view class="page">
		<view class="bg-white flex align-center justify-between padding-lr padding-tb-sm">
			<u-icon name="calendar" size="36rpx" color="#999"></u-icon>
			<view class="flex-1 text-muted text-sm text-center" @click="showStartDatePicker = true">
				{{ startDate }}
			</view>
			<text class="text-muted text-sm">至</text>
			<view class="flex-1 text-muted text-sm text-center" @click="showEndDatePicker = true">{{ endDate }}</view>
		</view>
		<view class="main">
			<view class="bg-white radius-lg padding margin-bottom" v-for="i in 3" :key="i" @click="handleExercise(i)">
				<view class="flex gap align-center">
					<image src="/static/image/teacher/icon-student-exercise.png" mode="aspectFit"
						style="width: 88rpx; height: 88rpx;">
					</image>
					<view class="flex-1">
						<u-text bold text="班级练习题" size="32rpx" color="#333"></u-text>
						<u-text margin="10rpx 0 0 0" text="2025-01-01 星期三" size="24rpx" color="#999"></u-text>
					</view>
					<view>
						<u-icon name="arrow-right" size="28rpx" color="#999"></u-icon>
					</view>
				</view>
				<view class="margin-top-sm">
					<u-text text="今日上传100道题目，共发现10道错题，正签率90%" size="24rpx" color="#666"></u-text>
				</view>
			</view>

			<u-datetime-picker :closeOnClickOverlay="true" :show="showStartDatePicker" type="date" mode="date"
				@close="showStartDatePicker = false" @cancel="showStartDatePicker = false" @confirm="confirmStartDate"
				format="YYYY-MM-DD"></u-datetime-picker>
			<u-datetime-picker :closeOnClickOverlay="true" :show="showEndDatePicker" type="date" mode="date"
				@close="showEndDatePicker = false" @cancel="showEndDatePicker = false" @confirm="confirmEndDate"
				format="YYYY-MM-DD"></u-datetime-picker>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs'

const showStartDatePicker = ref(false)
const showEndDatePicker = ref(false)
const startDate = ref(dayjs().format('YYYY-MM-DD'))
const endDate = ref(dayjs().format('YYYY-MM-DD'))
const handleExercise = (i) => {
	console.log(i)
	uni.navigateTo({
		url: '/pages/teacher/createExercise/preview?id=' + i
	})
}

const confirmStartDate = (e) => {
	console.log(e)
	showStartDatePicker.value = false
	startDate.value = dayjs(e.value).format('YYYY-MM-DD')
}

const confirmEndDate = (e) => {
	console.log(e)
	showEndDatePicker.value = false
	endDate.value = dayjs(e.value).format('YYYY-MM-DD')
}
</script>

<style></style>
